<template>
    <a-form layout='horizontal' class="permissionAddRoot">
        <a-form-item label="权限名称"
        >
            <a-input v-model="form.permissionName"></a-input>
        </a-form-item>

        <a-form-item label="权限描述"
        >
            <a-input v-model="form.permissionDesc"></a-input>
        </a-form-item>

        <a-form-item label="权限类型">
            <a-radio-group v-model="form.permissionType">
                <a-radio-button v-for="item in avaType" :value="item">
                    <span v-if="item == 'MENU' ">菜单</span>
                    <span v-if="item == 'FUNCTION' ">功能</span>
                    <span v-if="item == 'ACTION' ">API接口</span>
                </a-radio-button>
            </a-radio-group>
        </a-form-item>

        <a-form-item :label="form.permissionType=='FUNCTION'? '权限路径': '接口地址' "
                     v-if="form.permissionType != 'MENU' && form.permissionType != '' ">
            <a-input v-model="form.permissionUrl"></a-input>
        </a-form-item>

        <a-form-item label="权限关键字">
            <a-input v-model="form.permissionKey"></a-input>
        </a-form-item>

        <a-form-item label="图标" v-if="form.permissionType == 'FUNCTION' || form.permissionType == 'MENU' ">

            <a-input v-model="form.permissionIcon"></a-input>

        </a-form-item>


        <a-form-item label="设为首页" v-if="form.permissionType == 'FUNCTION'">

            <a-switch   v-model="form.permissionHomepage">
                <a-icon type="check" slot="checkedChildren"/>
                <a-icon type="close" slot="unCheckedChildren"/>
            </a-switch>
        </a-form-item>

    </a-form>
</template>

<script>
       import {Form, DatePicker,Input,Button,Icon,Radio,TreeSelect,message,Switch} from 'ant-design-vue';

    export default {
        name: "PermissionAdd",
        components: {
            ARadioButton:Radio.Button,
            ARadioGroup:Radio.Group,
            AFormItem:Form.Item,
            AForm:Form,
            ADatePicker:DatePicker,
            AInput:Input,
            AButton:Button,
            AIcon:Icon,
            ATreeSelect:TreeSelect,
            ASwitch:Switch
        },
        props: ['value'],

        data() {
            return {
                avaType:[],
                form: {
                    permissionName: '',
                    permissionDesc: '',
                    permissionType: '',
                    permissionUrl: '',
                    permissionKey: '',
                    permissionPid:'',
                    permissionIcon:'',
                    permissionHomepage:false
                }
            };
        },
        mounted(){

                if(this.value){

                    this.form.permissionPid = this.value.permission.permissionId;
                    let ptype = this.value.permission.permissionType;
                    if(ptype === "FUNCTION"){
                        this.avaType = ["FUNCTION","ACTION"];
                    }else if(ptype === "MENU"){
                        this.avaType = ["MENU","FUNCTION"];
                    }else {
                        this.avaType = ["ACTION","MENU","FUNCTION"];
                    }

                }

            },
        methods: {

            verfity() {

                if (this.form.permissionName === '') {
                    message.error('请输入权限名称');
                    return false;
                }
                if (this.form.permissionType === '') {
                    message.error('请选择权限类型');
                    return false;
                }
                if (this.form.permissionType != 'MENU') {

                    if (this.form.permissionUrl === '') {
                        message.error('请输入权限路径/API接口地址');
                        return false;
                    }
                    if (this.form.permissionKey === '') {

                        message.error('请输入权限关键字');
                        return false;
                    }
                }

                return true;

            },

            submitData() {

                if (this.verfity()) {

                    this.$axios.post("/auth/permission/addPermission", this.form)
                        .then(d => {

                            let result = d.data;

                            if (result.status == 0) {
                                message.success('添加成功');
                                this.$emit("ok");

                            } else {
                                message.error(result.message);
                            }
                        })
                        .catch(e => {
                            message.error('添加失败,未知错误');
                        })

                }


            }
        }
    }
</script>

<style scoped>

    .permissionAddRoot {

    }


</style>